<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店管理系统</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../iconfont/amend、delete、add、search/iconfont.css">
    <link rel="" href="../bootstrap-3.4.1/fonts/glyphicons-halflings-regular.eot">
    <script src="../jQuery/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="../JavaScript/dataSaveAndGet.js"></script>
    <link rel="stylesheet" href="../iconfont/amend、delete、add、search/iconfont.css">
    <!-- <link rel="stylesheet" href="../css/rc/guestRoom.css"> -->
    <!-- <script src="../JavaScript/rc/initializationData.js"></script> -->
    <link rel="stylesheet" href="../css/rc/finane.css">

</head>

<body>
    <header class="clear">
        <p>XX酒店后台管理系统</p>
        <div class="portrait clear">
            <!-- 头像 -->
            <div>
                <img src="../images/老板.webp" alt="">
            </div>
            <div id="quit">
                <p>工号:<span class="jobId"></span> &nbsp;欢迎你!
                </p>
                <button>退出<span class="iconfont icon-tuichu"></span></button>
            </div>
        </div>
    </header>
    <!-- 主导航 -->
    <nav class="navbar navbar-default" id="mianNav">
        <div class="container-fluid">
            <!-- 主导航选项 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class=""><a href="./guestRoom.html">客房管理</a></li>
                    <li class=""><a href="./reserve.html">预定管理</a></li>
                    <li class=""><a href="./crm.html">房客管理</a></li>
                    <li class=""><a href="./orderForm.html">订单管理</a></li>
                    <li class="mianActive"><a href="./finance.html">财务管理</a></li>
                    <li class=""><a href="./staffManagement.html">员工管理</a></li>
                    <li class=""><a href="./personinMess.html">个人信息</a></li>
                    <li class=""><a href="./gonggao.html">公告</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <main class="clear">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar">1</span>
                        <span class="icon-bar">2</span>
                        <span class="icon-bar">3</span>
                    </button>
                    <a class="navbar-brand" href="#">财务管理</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="./finance.html">查看入账信息</a></li>
                        <li class="active1"><a href="./expenditure.html">查看支出信息</a></li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        搜索类型：
                        <select name="" id="typeOption" class="form-control">
                            <option value="option1">姓名</option>
                            <option value="option2">房号</option>
                            <option value="option3">订单日期</option>
                        </select>
                        <div class="form-group">
                            <input type="text" class="form-control" id="OptionType" placeholder="请输入姓名">
                        </div>
                        <button class="btn btn-default" id='shousuo'>搜索财务信息</button>
                    </form>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <!-- 权限不足框 -->
        <div class="optionBody" id="insufficientPrivileges">

        </div>
        <div class="table-responsive">
            <table class="table table-striped">
                <h4>历史订单列表</h4>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>房号</th>
                        <th>房费</th>
                        <th>押金</th>
                        <th>入住时间</th>
                        <th>退房时间</th>
                        <th>房间状态</th>
                        <th>操作人</th>
                        <th> 操作</th>
                    </tr>
                </thead>
                <tbody id="mytbody">

                </tbody>
            </table>
            <nav aria-label="Page navigation" id="navhead">
                <ul class="pagination">
                    <li id="front">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="hear" id="back">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <!-- 搜索列表 -->
            <table class="table" id="table2">
                <thead>
                    <th>
                        <h4>搜索订单列表</h4>
                    </th>
                    <tr>
                        <th>姓名</th>
                        <th>房号</th>
                        <th>房费</th>
                        <th>押金</th>
                        <th>入账时间</th>
                        <th>退房时间</th>
                        <th>房间状态</th>
                        <th>操作人</th>
                        <th> 操作</th>
                    </tr>
                </thead>
                <tbody id="mytbody2">

                </tbody>
            </table>

            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">提示</h4>
                        </div>
                        <div class="modal-body">
                            <label>客户姓名:<input type="text" id="checkInOrder-name" disabled></label>
                            <br>
                            <label>房间号:<input type="text" id="checkInOrder-room" disabled></label>
                            <br>
                            <label>房费:<input type="text" id="checkInOrder-price" disabled></label>
                            <br>
                            <label>押金 :<input type="text" id="checkInOrder-cach" disabled></label>
                            <br>
                            <label>入住时间:<input type="text" id="checkInOrder-time" disabled></label>
                            <br>
                            <label>订单号 :<input type="text" id="checkInOrder-order" disabled></label>
                            <br>
                            <label>订单状态:<input type="text" id="checkInOrder-orderState" disabled></label>
                            <br>
                            <label>操作人 :<input type="text" id="checkInOrder-inputter" disabled></label>
                            <br>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="buttonj">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <table class="table">
                <thead>
                    <th>
                        <h4>酒店收入表单</h4>
                    </th>
                    <tr>
                        <th>房费收入</th>
                        <th>押金收入</th>
                        <th>总收入</th>
                    </tr>
                </thead>
                <tbody id="mytbody1">

                </tbody>
            </table>
            <button id="count">总计</button>
        </div>
    </main>
    <footer>

    </footer>
    <script src="../JavaScript/rc/finance.js"></script>
    <!-- <script>
        let maxmiddle = 0 //最大页
        let nowmiddle = 0  //当前页
        let checkInOrder = getData('checkInOrder')
        // 头部退出按钮
        $('#quit').find('button').click(function () {
            open('../html/login.html', '_self')
        })


        //下拉菜单选择
        $('#typeOption').click(function () {
            let searchType = $(this).val()
            // console.log(searchType);
            if (searchType == 'option1') {
                $('#OptionType').attr('placeholder', '请输入姓名')
            }
            else if (searchType == 'option2') {
                $('#OptionType').attr('placeholder', '请输入房号')
            }
            else if (searchType == 'option3') {
                $('#OptionType').attr('placeholder', '请输入最近一周时间')
            }

        })

        //点击主菜单
        $('#mianNav .navbar-nav>li').on('click', function () {
            //设置自身为选中状态并清除其他选项的选中状态
            $(this).addClass('mianActive').siblings().removeClass('mianActive')
        })

        //点击二级菜单
        $('main .navbar-nav>li').on('click', function () {
            //设置自身为选中状态并清除其他选项的选中状态
            $(this).addClass('active').siblings().removeClass('active')
        })

        // 循环添加li
        // 渲染分页按钮
        // let checkInOrder = getData('checkInOrder')
        function fenyeanniu() {
            checkInOrder = getData('checkInOrder')
            let middlenum = Math.ceil(checkInOrder.length / 10)
            maxmiddle = middlenum
            for (let i = 1; i <= middlenum; i++) {
                $('.hear').before(`<li class='myli' id='maxli' ><a href="#">${i}</a></li>`)
            }
        }
        fenyeanniu()

        function changeLi() {
            for (let i = 0; i < $('.myli').length; i++) {
                $('.myli').eq(i).removeClass('active')
            }
            $('.myli').eq().addClass('active')
        }
        changeLi()

        // 给每一个分页按钮绑定点击事件

        //  console.log(maxmiddle);
        $('.pagination').on('click', '.myli', function () {
            let clickNum = $(this).text()
            // console.log(clickNum);
            nowmiddle = clickNum
            console.log(nowmiddle);
            let start = (parseInt(clickNum) - 1) * 10  //起始下标
            let end = start + 9  //终止下标
            if (clickNum == maxmiddle) {
                end = checkInOrder.length - 1  //数据最后一项的下标
            }
            showTbody(start, end)
        })
        //遍历数组中的房费
        let num = []
        let sum = 0  //累加求和
        function shuju() {
            for (let j = 0; j < checkInOrder.length; j++) {
                let aggregate = parseInt(checkInOrder[j].price)
                let cash = parseInt(checkInOrder[j].cashPledge)
                num.push(aggregate)
                num.push(cash)
            }
            return num
        }
        shuju()

        // 计算总房费+押金
        function zongheji() {
            for (let k = 0; k < num.length; k++) {
                sum = sum + num[k]
            }
            return sum
        }

        //
        let fan = []  //房费数组
        let shouru = 0  //累加求和
        function fanfeisr() {
            for (let j = 0; j < checkInOrder.length; j++) {
                let aggregate = parseInt(checkInOrder[j].price)
                fan.push(aggregate)
            }
            return fan
        }
        fanfeisr()
        // 计算总房费
        function fanheji() {
            for (let l = 0; l < fan.length; l++) {
                shouru = shouru + fan[l]
            }
            return shouru
        }
        let money3 = zongheji()
        let money1 = fanheji()
        let money2 = money3 - money1
        let time = getTime()
        //渲染页面数据

        function showTbody(start, end) {
            $('#mytbody').html('')
            for (let i = start; i <= end; i++) {
                // console.log(i);
                let htmlStr = ` 
                    <tr class='drf'>
                        <td>${checkInOrder[i].clientName}</td>
                        <td>${checkInOrder[i].roomNumber}</td>
                        <td>${checkInOrder[i].price}</td>
                        <td>${checkInOrder[i].cashPledge}</td>
                        <td>${checkInOrder[i].checkInTime}</td>
                        <td>${checkInOrder[i].checkInTime}</td>
                        <td>${time}</td>
                        <td>${checkInOrder[i].inputter}</td>
                        <td class='jkie'>         
                            <button class="tankuang">详情</button>
                        </td>
                    </tr>
                    `
                $('#mytbody').append(htmlStr)
            }

        }
        showTbody(0, 9)
        //搜索
        $('#shousuo').on('click', function () {
            //清除表单中按钮的默认提交事件
            $('#table2').show()
            event.preventDefault()
            let shujuval = $(this).siblings('div').children('input').val()
            let fanhaoval = $(this).siblings('div').children('input').val()
            for (let f = 0; f < checkInOrder.length; f++) {
                if (shujuval === checkInOrder[f].clientName || fanhaoval === checkInOrder[f].roomNumber) {
                    console.log(checkInOrder[f]);
                    let htmlStr1 = ` 
                    <tr>
                        <td>${checkInOrder[f].clientName}</td>
                        <td>${checkInOrder[f].roomNumber}</td>
                        <td>${checkInOrder[f].price}</td>
                        <td>${checkInOrder[f].cashPledge}</td>
                        <td>${checkInOrder[f].checkInTime}</td>
                        <td>${time}</td>
                        <td>${checkInOrder[f].inputter}</td>
                        <td class='jkie'>         
                            <button class="tankuang">详情</button>
                        </td>
                    </tr>
                    `
                    $('#mytbody2').append(htmlStr1)

                }
            }
        })


        let shijian = []
        function giyu() {

            // let ruzhushijian = $(this).siblings('div').children('input').val()
            for (let i = 0; i < checkInOrder.length; i++) {
                let ruzhushijian = checkInOrder[i].checkInTime
                // console.log(ruzhushijian);
                shijian.push(ruzhushijian)
            }

        }
        giyu()
        $('#shousuo').on('click', function (start, end) {
            let zhi = $(this).siblings('div').children('input').val()
            console.log(zhi);

            for (let i = 0; i < checkInOrder.length; i++) {

                if (checkInOrder[i].checkInTime === zhi) {
                    let htmlStr1 = ` 
                <tr>
                    <td>${checkInOrder[i].clientName}</td>
                    <td>${checkInOrder[i].roomNumber}</td>
                    <td>${checkInOrder[i].price}</td>
                    <td>${checkInOrder[i].cashPledge}</td>
                    <td>${checkInOrder[i].checkInTime}</td>
                    <td>${time}</td>
                    <td>${checkInOrder[i].inputter}</td>
                    <td class='jkie'>         
                        <button class="tankuang">详情</button>
                    </td>
                </tr>
                `
                    $('#mytbody2').append(htmlStr1)
                }
            }
        })
        //显示总收入
        $('.table-responsive').on('click', '#count', function () {
            $('#mytbody1').html('')
            let htmlStr = ` 
                    <tr>
                        <td>${money1}</td>
                        <td>${money2}</td>
                        <td>${money3}</td>
                    </tr>
                    `
            $('#mytbody1').append(htmlStr)
        })
        //上一页
        $('#front').click(function () {
            //根据当前页来判断
            let num = parseInt(nowmiddle) - 1
            let start = (parseInt(num) - 1) * 10  //起始下标
            let end = start + 9   //终止下标

            //判断当前点击的是不是第一页
            if (nowmiddle == 1) {

            } else {
                showTbody(start, end)
                nowmiddle = num   //修改完数据过后，当前页要更新
            }
        })
        //下页面
        $('#back').click(function () {
            //根据当前页来判断
            let num = parseInt(nowmiddle) + 1   //num 是应该渲染的是哪一页
            console.log(num);
            let start = (parseInt(num) - 1) * 10  //起始下标
            let end = start + 9   //终止下标
            //判断当前点击的是不是最后一页，是最后一页的话 end值就要变
            if (num == maxmiddle) {
                end = checkInOrder.length - 1  //数据最后一项的下标
            }
            console.log(start, end);

            //判断当前点击的是不是最后一页
            if (nowmiddle == maxmiddle) {

            } else {
                showTbody(start, end)
                nowmiddle = num   //修改完数据过后，当前页要更新
            }
        })
        //详情
        $('#mytbody').on('click', '.tankuang', function () {
            $('#myModal').modal('show')
            let nameVal = $(this).parents('tr').children('td').eq(0).text()
            let roomVal = $(this).parents('tr').children('td').eq(1).text()
            let priceVal = $(this).parents('tr').children('td').eq(2).text()
            let cashVal = $(this).parents('tr').children('td').eq(3).text()
            let timeVal = $(this).parents('tr').children('td').eq(4).text()

            $('#checkInOrder-name').val(nameVal)
            $('#checkInOrder-room').val(roomVal)
            $('#checkInOrder-price').val(priceVal)
            $('#checkInOrder-cach').val(cashVal)
            $('#checkInOrder-time').val(timeVal)
            for (let i = 0; i < checkInOrder.length; i++) {
                if (nameVal === checkInOrder[i].clientName) {
                    let order = checkInOrder[i].orderNumber
                    let state = checkInOrder[i].orderState
                    let inputter = checkInOrder[i].inputter
                    // console.log(order);
                    $('#checkInOrder-order').val(order)
                    $('#checkInOrder-orderState').val(state)
                    $('#checkInOrder-inputter').val(inputter)

                }
            }
        })
        //搜索时的详情
        $('#mytbody2').on('click', '.tankuang', function () {
            $('#myModal').modal('show')
            let nameVal = $(this).parents('tr').children('td').eq(0).text()
            let roomVal = $(this).parents('tr').children('td').eq(1).text()
            let priceVal = $(this).parents('tr').children('td').eq(2).text()
            let cashVal = $(this).parents('tr').children('td').eq(3).text()
            let timeVal = $(this).parents('tr').children('td').eq(4).text()

            $('#checkInOrder-name').val(nameVal)
            $('#checkInOrder-room').val(roomVal)
            $('#checkInOrder-price').val(priceVal)
            $('#checkInOrder-cach').val(cashVal)
            $('#checkInOrder-time').val(timeVal)
            for (let i = 0; i < checkInOrder.length; i++) {
                if (nameVal === checkInOrder[i].clientName) {
                    let order = checkInOrder[i].orderNumber
                    let state = checkInOrder[i].orderState
                    let inputter = checkInOrder[i].inputter
                    // console.log(order);
                    $('#checkInOrder-order').val(order)
                    $('#checkInOrder-orderState').val(state)
                    $('#checkInOrder-inputter').val(inputter)

                }
            }
        })
        showHeadImgId()
        $('#quit').find('button').click(function () {
            open('./login.html', '_self')
        })

        //显示当前登录者头像及工号
        function showHeadImgId() {
            let useData = getData('staff')
            let loginUser = getData('loginUser').jobNumber
            for (let i = 0; i < useData.length; i++) {
                if (useData[i].jobNumber == loginUser) {
                    $('.portrait').find('img').attr('src', useData[i].headPortrait)
                    $('#quit').find('.jobId').html(useData[i].jobNumber)
                }

            }
        }
        // getData('staff')
        let AccessLevel = getData('loginUser').AccessLevel
        console.log(AccessLevel);
        if (AccessLevel > 1) {
            insufficientPrivileges()
        }
        //权限不足提示
        function insufficientPrivileges() {
                //展示权限不足框
                $('#insufficientPrivileges').show().siblings().hide()
                //清除原来的显示数据
                $('#insufficientPrivileges').html('')
                //展示权限不足
                $('#insufficientPrivileges').eq(0).append(`
                 <p>权限不足请联系管理员</p>
             `)
            }
    </script> -->
</body>

</html>